<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>班级排行</title>
		<link href="../../../css/style.css" rel="stylesheet" type="text/css">
		<link href="../../../css/mui.css" rel="stylesheet" type="text/css">
		<script src="../../../js/rem.js"></script>
		<script src="../../../js/vue.min.js"></script>
		<style>
			.sentop{
				
				background-size: 100% 100%;
				height: 200px;
				color: #fff;
			}
			.senrule{
				padding: 15px 15px 15px 0;
				font-size: 14px;
			}
			.senHead img{
				width: 1rem;
				height: 1rem;
				display: inline-block;
				margin-bottom: 10px;
				border-radius: 50px;
			}
			.sentopmask{
				background: rgba(0,0,0,0.5);
				height: 200px;
				text-align: center;
			}
			.senData {
				width: 90%;
				margin: 0 auto;
				margin-top: 20px;
			}
			.senData div{
				width: 30%;
			}
			.senData span{ display: block;}
			.mysen{
				background: #fff;
				
				padding: 15px;
			}
			.mysen .count{
				font-size: 30px;
				color: #8c8c8c;
				line-height: 52px;
			}
			.mysenimg{
				width: 1rem;
				height: 1rem;
				border-radius: 50px;
				margin-right: 10px;
				margin-left: 10px;
			}
			.mysenRight{
				line-height: 26px;
			}
			.mysenRight p{
				font-size: 12px;
			}
			.btnrenwe{
				background: #f7c701;
				border-radius:20px;
				color: #fff;
				width: 60%;
				display: inline-block;
				text-align: center;
				height:40px;
				line-height: 40px;
				
			}
			.btnyaoqi{
				display: inline-block;
				width: 30%;
				text-align: center;
				background:#fa8801 ;
				border-radius:20px;
				color: #fff;
				height:40px;
				line-height: 40px;
			}
			.senbtn{
				margin-top: 10px;
			}
			.senlist{
				margin-top: 10px;
				
			}
			.senlist .mui-table-view{
				padding-bottom: 10px;
			}
			.senlist .mui-table-view:before{
				display: none;
				
			}
			.senlist .img1{
				width: 0.5rem;
				display: inline-block;
				padding-top: 0.3rem;
			}
			.senlist .mui-table-view-cell{
			
				margin: 0 10px;
				padding:5px 0;
			}
			.senlist .mui-table-view-cell > a:not(.mui-btn){
				margin: 0;
			}
			.mui-table-view-cell:after{
				height: 1px;
				left: 0;
			}
			.senlist .count{
				font-size: 30px;
				color: #8c8c8c;
				line-height: 52px;
				padding-right: 10px; 
			}
		</style>
	</head>
	<body>
		<div id="myClass">
			<div class="sentop" :style="{backgroundImage:'url(' + items[0].child_avatar + ')'}">
				<div class="sentopmask">
					<!--font class="senrule mui-icon mui-icon-help fr" @tap="classrule()">排名规则</font-->
					<font class="senrule mui-icon fr" @tap="classrule()"></font>
					<div class="clear"></div>
					<div>{{items[0].child_name}}占领了封面</div>
					<div class="senData">
						<div class="fl">{{items[0].integral_number}}<span>积分</span></div>
						<div class="fl senHead"><img :src="items[0].child_avatar"><span>{{items[0].child_name}}</span></div>
						<div class="fl">{{items[0].member_number}}<span>家人关注</span></div>
						<div class="clear"></div>
					</div>
				</div>
				
			</div>
			<div class="mysen">
				<div>
					<span class="count fl">{{items.my.sort}}</span>
					<div class="mysenRight">
						<img class="fl mysenimg" :src="items.my.child_avatar" />
						<div class="fl">
							{{items.my.child_name}}
							<p>{{items.my.content}}</p>
						</div>
						<div class="fr" style="text-align: center; color: #06b5ea;">
							{{items.my.integral_number}}
							<p>{{items.my.memeber_number}}位家长关注</p>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
				<div senbtn>
					<span class="btnrenwe" @tap="renwu()">做任务集积分</span>
					<span class="btnyaoqi fr" @tap="jiaren()">邀请家人</span>
				</div>
			</div>
			<div class="senlist">
				<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-media" v-for="(item,index) in items" v-if="index<items.number-1">
									<div class="count fl">{{item.sort}}</div>
									<a href="javascript:;" class="integralContent">
										<img class="mui-media-object mui-pull-left" :src="item.child_avatar">
										<div class="mui-media-body mui-pull-left" style="line-height: 40px;">
											{{item.child_name}}
										</div>
										<div class="mui-media-body mui-pull-right" style="text-align:right">
											{{item.integral_number}}积分
											<p class="mui-ellipsis">{{item.member_number}}位家长关注</p>
										</div>
										<div class="clear"></div>
									</a>
									<div class="clear"></div>
								</li>
				</ul>
			</div>
		</div>
		<script src="../../../js/mui.js"></script>
		<script src="../../../js/vue.min.js"></script>
		<script src="../../../js/app.js"></script>
		<script type="text/javascript" src="../../../js/navfix.js"></script>  
		<script>
			mui.init()
			var favoritestatus = 0;
			mui.plusReady(function() {
				var state = app.getState();
				var uid = state.userid;
				mui.post(Apiurl+'index/class', {
					uid: uid
				}, function(data) {
					console.log(JSON.stringify(data)); 
					myClass.items = data
					
				}, 'json');
			});
			var myClass= new Vue({
				el: '#myClass', 
				data: {
					items: [] 
				},
				methods: {
					guanzhuchange: function(item,event){
						var data={
                            		uid: uid,
                            		code:item.code 
                         }
						if(event.target.innerHTML=='取消关注'){
							event.target.innerHTML='关注';
                            if(favoritestatus==0){
                            	favoritestatus=1;
                            	
                            	mui.post(Apiurl+'index/school', data, function(data) {
                            		if(data.status == "200") {
                            			plus.nativeUI.toast('取消成功', {
											verticalAlign: 'middle'
										});
                            		}
                            	}, 'json')
                            }else{
                            	plus.nativeUI.alert('您操作的太快了');
                            }
                            setTimeout(function() {
								favoritestatus = 0;
							}, 2000);
						}else{
							event.target.innerHTML='取消关注';
							mui.post(Apiurl+'index/school', data, function(data) {
                            		if(data.status == "200") {
                            			plus.nativeUI.toast('关注成功', {
											verticalAlign: 'middle'
										});
                            		}
                            	}, 'json')
						}
						
							
					},
					//排名规则
					classrule: function(){
						mui.openWindowWithTitle({
						url: './classrule.html',
						id: 'classrules',
						preload: true,
						show: {
							aniShow: 'pop-in',
							autoShow: true
						},
						styles: {
							"render": "always",
							"popGesture": "hide",
							"bounce": "vertical",
							"bounceBackground": "#efeff4",
							"titleNView": { //详情页原生导航配置
								backgroundColor: '#25aae3', //导航栏背景色
								titleText: '排名规则', //导航栏标题
								titleColor: '#ffffff', //文字颜色
								autoBackButton: true, //自动绘制返回箭头
								splitLine: { //底部分割线
									color: '#cccccc'
								}
							}
						},
						waiting: {
							autoShow: true
						}
					});
					},
					//做任务
					renwu: function(){
						mui.openWindowWithTitle({
						url: '../integral/index.html',
						id: 'integralClass',
						preload: true,
						show: {
							aniShow: 'pop-in',
							autoShow: true
						},
						
						waiting: {
							autoShow: true
						}
					});
					},
					//邀请家人
					jiaren: function(){
						mui.openWindowWithTitle({
						url: '../invite/index.html',
						id: 'inviteClass',
						preload: true,
						show: {
							aniShow: 'pop-in',
							autoShow: true
						},
						styles: {
							"render": "always",
							"popGesture": "hide",
							"bounce": "vertical",
							"bounceBackground": "#efeff4",
							"titleNView": { //详情页原生导航配置
								backgroundColor: '#25aae3', //导航栏背景色
								titleText: '亲友团', //导航栏标题
								titleColor: '#ffffff', //文字颜色
								autoBackButton: true, //自动绘制返回箭头 
								splitLine: { //底部分割线
									color: '#cccccc'
								}
							}
						},
						waiting: {
							autoShow: true
						}
					});
					}
					
				}
			});
			
			function banner_detail(bannerurl, bannertitle) {
				mui.openWindow({
					url: bannerurl,
					id: 'ad_detail',
					styles: {
						"render": "always",
						"popGesture": "hide",
						"bounce": "vertical",
						"bounceBackground": "#efeff4",
						"titleNView": titleNView = { //详情页原生导航配置
							autoBackButton: true, //自动绘制返回箭头
							backgroundColor: '#25aae3', //导航栏背景色
							titleText: bannertitle, //导航栏标题
							titleColor: '#F7F7F7', //文字颜色
							//coverage:"120px",
							//type: 'transparent', //透明渐变样式
							splitLine: { //底部分割线
								color: '#cccccc'
							}
						}
					}
				});
			}
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
		
		</script>
	</body>
</html>
